<template>
  <!--
    	作者：wangxw
    	时间：2019-05-05
    	描述：分类模板
    -->
  <div>
    <div class="table-wrap">
      <el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
        <el-table-column prop="region_id" label="地区ID" width="80"></el-table-column>
        <el-table-column prop="region_name" label="分类地区">
        </el-table-column>
        <el-table-column prop="share_title" label="分享标题"></el-table-column>
        <el-table-column prop="category_style" label="分类页样式">
          <template slot-scope="{row}">
            <div v-if="row.category_style==10">一级分类(大图)</div>
            <div v-else-if="row.category_style==20">一级分类(小图)</div>
            <div v-else-if="row.category_style==30">二级分类</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="90">
          <template slot-scope="scope">
            <el-button @click="editClick(scope.row)" type="text" size="small">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <category-edit :show-edit.sync="showEdit"  :form-data="formData" @refreshData="getCategoryList"></category-edit>
  </div>
</template>

<script>
import PageApi from '@/api/page.js';

import CategoryEdit from "./categoryEdit.vue";

export default {
  components:{
    CategoryEdit
  },
  data() {
    return {
      /*表单数据对象*/

      tableData: [],
      loading: false,
      formData:{},
      showEdit:false

    };
  },
  created() {
    this.getCategoryList();
  },
  methods: {

    getCategoryList() {
      let self = this;
      this.loading = true;
      PageApi.categoryList().then(res => {
        self.tableData = res.data.list;
        self.loading= false;

      })
    },
    editClick(row){
      this.formData = row;
      this.showEdit = true;
    }
  }
};
</script>

<style scoped="scoped">
.model-container {
  width: 300px;
  height: calc(100vh - 150px);
  margin-right: 30px;
}

.model-container img {
  width: 100%;
}

.model-container .img-box {
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, .1);
}

.param-container {
  padding: 20px;
  height: calc(100vh - 150px);
  border: 1px solid #cccccc;
}
</style>
